{% load static %}
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="keyword" content="{% block keyword %}BASE_HTML{% endblock %}">
    <meta name="description" content="{% block description %}BASE_HTML{% endblock %}">
    <meta name="author" content="skywalker">
{#    <link rel="icon" href="{% static 'icons/3.png' %}">#}
    <title>实验室药品分析与管理系统{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        :root {
            --sidebar-width: 240px;
            --primary-color: #2c3e50;
            --accent-color: #3498db;
            --hover-bg: #f8f9fa;
        }

        body {
            margin-left: var(--sidebar-width);
            background-color: #f4f6f9;
            min-height: 100vh;
        }

        .sidebar {
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            width: var(--sidebar-width);
            background: white;
            box-shadow: 2px 0 8px rgba(0,0,0,0.05);
            padding: 1rem;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }

        .brand-area {
            padding: 1rem;
            border-bottom: 1px solid #eee;
            margin-bottom: 1rem;
            text-align: center;
        }

        .brand-area img {
            margin-bottom: 1rem;
        }

        .nav-menu {
            list-style: none;
            padding: 0;
            flex-grow: 1;
        }

        .nav-item {
            margin: 4px 0;
            border-radius: 6px;
            transition: all 0.2s;
        }

        .nav-link {
            color: var(--primary-color);
            padding: 12px;
            display: flex;
            align-items: center;
            text-decoration: none;
            border-radius: 6px;
        }

        .nav-link:hover {
            background: var(--hover-bg);
        }

        .nav-link.active {
            background: var(--accent-color);
            color: white !important;
        }

        .nav-link i {
            width: 24px;
            margin-right: 12px;
            text-align: center;
            font-size: 1.1rem;
        }

        .search-form {
            padding: 1rem 0;
            border-top: 1px solid #eee;
            margin-top: auto;
        }

        .search-form .form-control,
        .search-form .custom-select {
            border-radius: 6px;
            border: 1px solid #e0e0e0;
            height: 42px;
        }

        .search-form .btn-primary {
            background-color: var(--accent-color);
            border-color: var(--accent-color);
            transition: all 0.2s;
            height: 42px;
            border-radius: 6px;
        }

        .search-form .btn-primary:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }

        .main-content {
            padding: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .user-area {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid #eee;
        }

        @media (max-width: 768px) {
            body {
                margin-left: 0;
            }

            .sidebar {
                transform: translateX(-100%);
                transition: transform 0.3s;
                z-index: 1000;
            }

            .sidebar.active {
                transform: translateX(0);
            }

            .search-form {
                padding: 0.5rem;
            }

            .search-form .custom-select {
                height: 38px;
                font-size: 0.9rem;
            }

            .search-form .btn-primary {
                font-size: 0.9rem;
                padding: 0.5rem;
            }
        }
    </style>
    {% block css %}{% endblock %}
</head>

<body>
<!-- 侧边栏 -->
<nav class="sidebar">
    <!-- 品牌区 -->
    <div class="brand-area">
{#        <img src="{% static 'icons/3.png' %}" width="48" alt="系统图标">#}
        <h5>实验药品管理系统</h5>
    </div>

    <!-- 导航菜单 -->
    <ul class="nav-menu">
        <li class="nav-item {% block indexHighlight %}{% endblock %}">
            <a class="nav-link" href="{% url 'Lab:index' %}">
                <i class="fas fa-capsules"></i>药品列表
            </a>
        </li>
        <li class="nav-item {% block insindexHighlight %}{% endblock %}">
            <a class="nav-link" href="{% url 'Lab:ins_index' %}">
                <i class="fas fa-microscope"></i>仪器列表
            </a>
        </li>
        <li class="nav-item {% block labHighlight %}{% endblock %}">
            <a class="nav-link" href="{% url 'Lab:lab' %}">
                <i class="fas fa-flask"></i>实验室列表
            </a>
        </li>
        <li class="nav-item {% block userHighlight %}{% endblock %}">
            <a class="nav-link" href="{% url 'Lab:userInfo' %}">
                <i class="fas fa-user-circle"></i>个人中心
            </a>
        </li>
        <li class="nav-item {% block aboutHighlight %}{% endblock %}">
            <a class="nav-link" href="{% url 'Lab:about' %}">
                <i class="fas fa-info-circle"></i>关于系统
            </a>
        </li>
    </ul>

    <!-- 搜索表单 -->
    <form class="search-form" action="{% url 'Lab:medicineSearch' %}" method="POST">
        {% csrf_token %}
        <div class="form-group">
            <input name="keyword"
                   class="form-control"
                   placeholder="输入药品名称或编号"
                   type="text"
                   required>

            <select name="searchType"
                    class="custom-select mt-3"
                    required>
                <option value="all">所有类别</option>
                <option value="name">按名称搜索</option>
                <option value="number">按编号搜索</option>
            </select>

            <button class="btn btn-primary mt-3"
                    type="submit"
                    style="width: 100%">
                <i class="fas fa-search mr-2"></i>立即搜索
            </button>
        </div>
    </form>

    <!-- 用户区域 -->
    <div class="user-area">
        {% if user.is_authenticated %}
            <a href="{% url 'Lab:logout' %}" class="btn btn-outline-secondary btn-block">
                <i class="fas fa-sign-out-alt"></i> {{ user.username }}
            </a>
        {% else %}
            <a href="{% url 'Lab:login' %}" class="btn btn-primary btn-block">
                <i class="fas fa-sign-in-alt"></i> 用户登录
            </a>
        {% endif %}
    </div>
</nav>

<main class="main-content">
    {% block main_block %}
    {% endblock %}
</main>

<!-- 移动端菜单切换按钮 -->
<button class="btn btn-light d-md-none mobile-menu-btn" style="position:fixed;top:10px;left:10px;z-index:1000">
    <i class="fas fa-bars"></i>
</button>

<script>
    // 移动端菜单切换
    document.querySelector('.mobile-menu-btn').addEventListener('click', function() {
        document.querySelector('.sidebar').classList.toggle('active');
    });

    // 点击外部区域关闭菜单
    document.addEventListener('click', function(event) {
        const sidebar = document.querySelector('.sidebar');
        const menuBtn = document.querySelector('.mobile-menu-btn');

        if (!sidebar.contains(event.target) && !menuBtn.contains(event.target)) {
            sidebar.classList.remove('active');
        }
    });
</script>

<!-- Bootstrap 相关脚本 -->
<script src="{% static 'js/jquery-3.3.1.slim.min.js' %}"></script>
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
</body>
</html>